<template>
	<!-- <h1>这是订单管理页面</h1> -->
	<div class="app">
		<div class="title">
			<!-- 点击查找部分开始-->
			<div class="serarch">
				<el-input placeholder="请输入订单编号" class="orders" v-model="orderNumber" clearable></el-input>
				<el-select v-model="orderStatus" clearable placeholder="请选择订单状态" class="orders">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="searchlogo">查找</el-button>
				<div class="block">
					<el-date-picker v-model="startDate" type="datetime" placeholder="选择开始日期">
					</el-date-picker>
					<span>至</span>
					<el-date-picker v-model="endDate" type="datetime" placeholder="选择结束日期">
					</el-date-picker>
					<el-select v-model="outbound" clearable placeholder="待出库" class="orders">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-button type="primary" icon="el-icon-download">导出</el-button>
					<el-button type="primary" icon="el-icon-download">汇总</el-button>
				</div>
			</div>
			<!-- 点击查找部分结束 -->
			<!-- 表格内容部分开始 -->
			<el-table :data="tableData" style="width: 100%; margin-top: 20px; font-size: 12px" border>
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="联系人">
								<span>{{ props.row.consignee }}</span>
							</el-form-item>
							<el-form-item label="联系电话">
								<span>{{ props.row.phone }}</span>
							</el-form-item>
							<el-form-item label="客服备注">
								<span v-if="props.row.adminMono">{{
                  props.row.adminMono
                }}</span>
								<span v-else>无</span>
							</el-form-item>
							<span>
								<el-form-item label="退款原因">
									<span v-if="props.row.refundReason">{{
                    props.row.refundReason
                  }}</span>
									<span v-else>未填写退款原因</span>
								</el-form-item>
							</span>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="订单编号" prop="orderNo" width="180" align="center">
				</el-table-column>
				<el-table-column label="用户ID" prop="userId" align="center">
				</el-table-column>
				<el-table-column label="订单状态" prop="status" align="center">
					<template slot-scope="scope">
						<el-tag aria-transitions>
							{{ scope.row.status | current }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="支付渠道" prop="payChannel" align="center">
					<template slot-scope="scope">
						<el-tag aria-transitions>
							{{
                scope.row.payChannel == "WX"
                  ? "微信支付"
                  : scope.row.payChannel == "OFFLINE"
                  ? "线下支付"
                  : "未支付"
              }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="订单金额" prop="actualPrice" align="center">
					<template slot-scope="scope">
						{{ "￥" + scope.row.actualPrice / 100 }}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="gmtCreate" align="center">
					<template slot-scope="scope">
						{{ scope.row.gmtCreate | formatDate }}
					</template>
				</el-table-column>
				<el-table-column label="物流渠道" prop="shipCode" align="center">
					<template slot-scope="scope">
						<el-tag disable-transitions>
							{{ scope.row.shipCode | logistihannel }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="物流单号" prop="shipNo" align="center">
				</el-table-column>
				<el-table-column label="备注" prop="mono" align="center"></el-table-column>
				<el-table-column label="操作" prop="" align="center" width="220">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="details(scope.$index, scope.row)">详情</el-button>
            <span v-if="scope.row.status==20">
              <span>
                <el-button size="mini" type="primary" @click="Distribution(scope.$index, scope.row)" class="givemore">配送单</el-button>
              </span>
              <span>
                <el-button size="mini" type="primary" @click="givethen(scope.$index, scope.row)">发货</el-button>
              </span>
            </span>
            <span v-if="scope.row.status==60">
              <el-button size="mini" type="primary" @click="backmoney(scope.$index, scope.row)">退款中</el-button>
            </span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 表格内容部分结束 -->
			<!-- 详情弹框部分内容开始 -->
			<el-dialog title="订单详情" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="订单编号" :label-width="formLabelWidth">
						{{ form.orderNo }}
					</el-form-item>
					<el-form-item label="用户id" :label-width="formLabelWidth">
						{{ form.userId }}
					</el-form-item>
					<el-form-item label="订单渠道" :label-width="formLabelWidth">
						{{ form.channel }}
					</el-form-item>
					<el-form-item label="订单状态" :label-width="formLabelWidth">
						<el-tag>
							{{
                form.status == 40
                  ? "待评价"
                  : form.status == 80
                  ? "已取消"
                  : form.status == 20
                  ? "待出库"
                  : form.status == 90
                  ? "已取消(系统)"
                  : form.status == 30
                  ? "待收货"
                  : form.status == 12
                  ? "正在拼团"
                  : form.status == 10
                  ? "未付款"
                  : form.status == 50
                  ? "已完成"
                  : form.status == 60
                  ? "退款中"
                  : form.status == 70
                  ? "已退款"
                  : ""
              }}
						</el-tag>
					</el-form-item>
					<el-form-item label="支付渠道" :label-width="formLabelWidth">
						<el-tag>{{
              form.payChannel == "WX"
                ? "微信支付"
                : form.payChannel == "OFFLINE"
                ? "线下支付"
                : "未支付"
            }}</el-tag>
					</el-form-item>
					<el-form-item label="用户留言" :label-width="formLabelWidth">
            {{form.uservalue}}
					</el-form-item>
					<el-form-item label="客服备注" :label-width="formLabelWidth">
						<template slot-scope="scope">
							{{ form.adminMono }}
							<el-button type="primary" icon="el-icon-edit-outline" @click="delivery(scope.$index, scope.row)">编辑</el-button>
						</template>
					</el-form-item>
					<el-form-item label="配送费用" :label-width="formLabelWidth">
						<span>免运费</span>
					</el-form-item>
					<el-form-item label="收货信息" :label-width="formLabelWidth">
						{{
              "(收货人)" +
              form.consignee +
              "(手机号)" +
              form.phone +
              "(地址)" +
              form.province +
              form.city +
              form.county +
              form.address
            }}
					</el-form-item>
					<el-form-item label="商品信息" :label-width="formLabelWidth" prop="">
						<el-table :data="form.skuList" border style="width: 100%; font-size: 12px">
							<el-table-column prop="spuTitle" label="名称"> </el-table-column>
							<el-table-column prop="title" label="规格"> </el-table-column>
							<el-table-column prop="num" label="商品数量"> </el-table-column>
							<el-table-column prop="unit" label="单位"> </el-table-column>
							<el-table-column prop="price" label="总价(单价*数量)">
								<template slot-scope="scope">
									{{ scope.row.price / 100 }}
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-form>
			</el-dialog>
			<!-- 详情弹框部分内容结束 -->
			<!-- 分页部分内容开始 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :total="total"
				 :current-page="pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
			</div>
      <!-- 分页部分内容结束 -->
      <!-- 发货改变颜色弹框部分开始 -->
          <el-dialog title="发货" :visible.sync="clickdelivery">
            <el-form :model="ruleForm">
              <el-form-item label="等级" ref="ruleForm" :label-width="formLabelWidth">
                <el-radio-group v-model="radio">
                  <el-radio :label="1">无色</el-radio>
                  <el-radio :label="2">绿色</el-radio>
                  <el-radio :label="3">橙黄</el-radio>
                  <el-radio :label="4">红色</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input v-model="ruleForm.contents" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="clickhidden">取 消</el-button>
                <el-button type="primary" @click="clicksure()">确 定</el-button>
              </div>
          </el-dialog>
      <!-- 发货改变颜色弹框部分结束 -->
		</div>
	</div>
</template>

<script>
import { renderinglist, gotlist } from "../encapsulation/OrderManagement";
export default {
  data() {
    return {
      options: [
        {
          value: "10",
          label: "未付款",
        },
        {
          value: "2",
          label: "正在拼团",
        },
        {
          value: "20",
          label: "待出库",
        },
        {
          value: "30",
          label: "待收货",
        },
        {
          value: "40",
          label: "待评价",
        },
        {
          value: "50",
          label: "已完成",
        },
        {
          value: "60",
          label: "退款中",
        },
        {
          value: "70",
          label: "已退款",
        },
        {
          value: "80",
          label: "已取消",
        },
        {
          value: "90",
          label: "已取消(系统)",
        },
      ],
      ruleForm:{
        contents:''  //内容
      },
      form: {
        orderNo: "", //订单编号
        userId: "", //用户ID
        channel: "", //订单渠道
        status: "", //订单状态
        payChannel: "", //支付渠道
        uservalue: "", //用户留言
        adminMono: "", // 客服备注
        consignee: "", //收货信息-名字
        phone: "", //收货信息-电话
        province: "", //收货信息-省份
        city: "", //收货信息-城市
        address: "", //收货信息-街道地址
        freightPrice: "", //配送运费
        county: "", // 城市某个区
        id: "",
        spuTitle: "",
        title: "",
        num: "",
        unit: "",
        skuTotalPrice: "",
        skuList: [],
      },
      tableData: [], //表格内容
      orderStatus: "", //搜索部分的订单状态
      orderNumber: "", //搜索部分的订单编号
      datetime: "", //搜索部分的日期
      startDate: "", //选择开始日期
      endDate: "", //选择结束日期
      outbound: "", //待出库
      pageNo: 1, // 默认页数
      pageSize: 20, // 页面条数
      total: 0, // 总共条数
      formLabelWidth: "120px", //宽度
      dialogFormVisible: false, //弹框显示隐藏
      clickdelivery:false, //发货弹框显示隐藏
      radio:1,  //默认颜色
    };
  },
  methods: {
    getlist() {
      let data = {
        page: this.pageNo, //订单页码
        limit: this.pageSize, //页码长度
        status: this.orderStatus, //订单状态
        orderNo: this.orderNumber, //订单号
      };
      renderinglist(data).then((res) => {
        console.log(res);
        this.tableData = res.data.data.items;
        this.total = res.data.data.total;
      });
    },
    // 改变颜色
    // tableRowClassName({row, rowIndex}) {
    //     if (rowIndex === 1) {
    //       return 'warning-row';
    //     } else if (rowIndex === 3) {
    //       return 'success-row';
    //     }
    //     return '';
    //   },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getlist();
    },
    // 查找
    searchlogo() {
      (this.pageNo = 1), (this.limit = 20), this.getlist();
    },
    //详情弹框
    details(index, row) {
      let datas = {
        orderId: this.form.id,
        orderNo: this.form.orderNo,
        userId: this.form.userId,
        channel: this.form.channel,
        status: this.form.status,
        payChannel: this.form.payChannel,
        mono: this.form.uservalue,
        adminMono: this.form.adminMono,
        freightPrice: this.form.freightPrice,
        consignee: this.form.consignee,
        phone: this.form.phone,
        province: this.form.province,
        city: this.form.city,
        county: this.form.county,
        address: this.form.address,
      };
      gotlist(datas).then((res) => {
        console.log(res);
        this.form.skuList = res.data.data.skuList;
      });
      this.dialogFormVisible = true; //点击显示弹框
      (this.form.id = row.id), (this.form.orderNo = row.orderNo); //订单编号
      this.form.userId = row.userId; //用户ID
      this.form.channel = row.channel; //订单渠道
      this.form.status = row.status; //订单状态
      this.form.payChannel = row.payChannel; //支付渠道
      this.form.uservalue = row.mono;
      this.form.adminMono = row.adminMono; // 客服备注
      this.form.freightPrice = row.freightPrice; //配送运费
      this.form.consignee = row.consignee; //收货信息-名字
      this.form.phone = row.phone; //收货信息-电话
      this.form.province = row.province; //收货信息-省份
      this.form.city = row.city; //收货信息-城市
      this.form.county = row.county; //收货信息-区域
      this.form.address = row.address; //收货信息-街道地址
    },
    // 点击发货弹框
    delivery(){
      this.clickdelivery=true
      // this.ruleForm.contents == form.adminMono
    },
    // 发货弹框点击取消
    clickhidden(){
      this.clickdelivery=false
      this.ruleForm.contents='';
    },
    // 发货弹框点击确定
    clicksure(){
    }
  },
  // 过滤
  filters: {
    current: function (val) {
      if (val == 40) {
        return "待评价";
      } else if (val == 80) {
        return "已取消";
      } else if (val == 70) {
        return "已退款";
      } else if (val == 60) {
        return "退款中";
      } else if (val == 30) {
        return "待收货";
      } else if (val == 90) {
        return "已取消(系统)";
      } else if (val == 50) {
        return "已完成";
      } else if (val == 20) {
        return "待出库";
      } else if (val == 10) {
        return "未付款";
      }
    },
    formatDate(value) {
      let date = new Date(value);
      let MM = date.getMonth() + 1;
      MM = MM < 13 ? MM : MM; //月
      let d = date.getDate();
      d = d < 13 ? d : d; //日
      let h = date.getHours();
      h = h < 13 ? h : h; //时
      let m = date.getMinutes();
      m = m < 13 ? m : m; //分
      return MM + "月" + d + "日" + h + "时" + m + "分";
    },
    logistihannel: function (val) {
      if (val == "NONE") {
        return "无需物流公司";
      } else if (val == "SF") {
        return "顺丰速运";
      } else if (val == "HTKY") {
        return "百世快递";
      } else if (val == "ZTO") {
        return "中通快递";
      } else if (val == "STO") {
        return "申通快递";
      } else if (val == "YTO") {
        return "圆通速递";
      } else if (val == "YD") {
        return "韵达速递";
      } else if (val == "YZPY") {
        return "邮政快递包裹";
      } else if (val == "EMS") {
        return "EMS";
      } else if (val == "HHTT") {
        return "天天快递";
      } else if (val == "JD") {
        return "京东快递";
      } else if (val == "UC") {
        return "优速快递";
      } else if (val == "DBL") {
        return "德邦快递";
      } else if (val == "ZJS") {
        return "宅急送";
      } else if (val == "TNT") {
        return "TNT快递";
      } else {
        return "未发货";
      }
    },
  },
  created() {
    this.getlist();
  },
};
</script>
<style scoped lang="less">
.app {
  padding: 20px;
  height: 100%;
  overflow: hidden !important;
  position: relative;
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px;
}
.orders {
  width: 210px;
  padding: 0 3px;
}
.block {
  margin-top: 10px;
}
.block span {
  padding: 0 5px;
}
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.el-form/deep/.el-input__inner {
  width: 220px;
}
.givemore{
  margin: 0 5px;
}
// 表格改变颜色
// .el-table .warning-row {
//     background: oldlace;
//   }

//   .el-table .success-row {
//     background: #f0f9eb;
//   }
</style>